<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>grid test</title>
        <style>
            .wrapper {
                width: 90%;
                max-width: 960px;
                /* 这里设置width和margin实现了水平居中 */
                margin: 0 auto;
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                grid-gap: 20px;
            }
            .col {
                background: rgb(255, 150, 150);
            }
            .span2 { grid-column: auto / span 2;}
            .span3 { grid-column: auto / span 3;}
            .span4 { grid-column: auto / span 4;}
            .span5 { grid-column: auto / span 5;}
            .span6 { grid-column: auto / span 6;}
            .span7 { grid-column: auto / span 7;}
            .span8 { grid-column: auto / span 8;}
            .span9 { grid-column: auto / span 9;}
            .span10 { grid-column: auto / span 10;}
            .span11 { grid-column: auto / span 11;}
            .span12 { grid-column: auto / span 12;}

            .content {
                grid-column: 2 / 8;
            }
        </style>
    </head>

    <body>
        <div class="wrapper">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
            <div class="col">4</div>
            <div class="col">5</div>
            <div class="col">6</div>
            <div class="col">7</div>
            <div class="col">8</div>
            <div class="col">9</div>
            <div class="col">10</div>
            <div class="col">11</div>
            <div class="col">12</div>
            <div class="col">13</div>
            <div class="col content">14this<br>is<br>more<br>content</div>
            <div class="col span3">15this<br>is<br>less</div>
            <div class="col span2">16</div>  
        </div>
        <!-- 水平居中的例子 -->
        <!-- <div style="width: 100%;">
            <div style="width: 100px;margin: 0 auto;">
                123
            </div>
        </div> -->
    </body>
</html>

